<template>
	<view class="msg-card" @click="handleClick">
		<view class="avatar-container">
			<img class="avatar" :src="getImagePath(item.avatar)" />
			<view v-if="item.unread" class="avatar-no"></view>
		</view>
		<view class="msg-content">
			<view class="msg-header">
				<view class="name">{{ item.name }}</view>
				<view class="tag">{{ item.tag }}</view>
			</view>
			<view class="msg-text">{{ item.message }}</view>
			<view class="msg-time">{{ item.time }}</view>
		</view>
		<img class="msg-status" :src="getStatusIcon(item.status)" />
	</view>
</template>

<script>
	export default {
		name: "MsgCard",
		props: {
			item: {
				type: Object,
				required: true
			}
		},
		methods: {
			getStatusIcon(status) {
				const statusIcons = {
					'pending': require('@/static/images/icon/messages-status-pending.png'),
					'active': require('@/static/images/icon/messages-status-active.png'),
					'ended': require('@/static/images/icon/messages-status-ended.png')
				};
				return statusIcons[status];
			},
			getImagePath(path) {
				if (path === 'doctor') {
					return require('@/static/images/icon/messages-doctor-avatar.png');
				}
				return require(path);
			},
			handleClick() {
				// 传递status和消息id
				this.$emit('item-click', {
					status: this.item.status,
					id: this.item.id || this.item.name + '-' + this.item.time, // 使用唯一标识
					...this.item
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.msg-card {
		display: flex;
		background: #fff;
		border-radius: 32rpx;
		box-shadow:0 5px 15px 1rpx #e0e2e7;
		margin-bottom: 20px;
		padding: 18rpx 16rpx;
		align-items: flex-start;
		position: relative;
		height: 190rpx;
	}

	.avatar-container {
		position: relative;
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		object-fit: cover;
		margin-right: 14rpx;
		background: #eee;
		margin: 8rpx 0 0 6rpx;
		position: relative;
		z-index: 0;
	}

	.avatar-no {
		background: #D30101;
		height: 18rpx;
		width: 18rpx;
		border-radius: 50%;
		position: absolute;
		z-index: 1;
		top: 12rpx;
		transform: translateX(540%);
		border: 2rpx solid #fff;
	}

	.msg-content {
		flex: 1;
		margin: 4rpx 0 0 20rpx;
	}

	.msg-header {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 6rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		display: flex;
		align-items: center;
	}

	.tag {
		background: #E7F7FD;
		color: #2E6D78;
		font-size: 23rpx;
		border-radius: 24rpx;
		padding: 4rpx 16rpx;
		margin-left: 16rpx;
	}

	.msg-text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 6rpx;
		margin-top: 10rpx;
	}

	.msg-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.msg-status {
		width: 128rpx;
		position: absolute;
		right: 2rpx;
		transform: translateY(-45%);
	}
</style>